.index {
  // background-color: rgba(153, 204, 255, 0.9);
  background-color: white;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;

  .content {
    width: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    position: relative;

    .options {
      position: absolute;
      right: 50px;
      bottom: 30px;
      font-size: 25px;
      display: flex;
      flex-direction: column;
      transition: all .2s;

      &:hover .options-handle {
        transition: all .2s;
        width: 0;
      }

      &:hover .options-btn {
        transition: all .5s;
        opacity: 1;
      }

      .options-handle {
        pointer-events: none;
        position: absolute;
        right: -50px;
        bottom: 0;
        width: 6px;
        height: 130px;
        background: linear-gradient(to top, rgba(255, 21, 21, 1), rgba(255, 21, 21, 1) 33.3%, rgba(121, 250, 197, 1) 33.3%, rgba(121, 250, 197, 1), rgba(121, 250, 197, 1) 66.6%, rgba(153, 204, 255, 1) 66.6%, rgba(153, 204, 255, 1));
        transition: all .2s;

        &:hover + .options {
          transition: all .2s;
          display: block;
        }
      }

      .btn {
        position: relative;

        &:hover .tip {
          opacity: 1;
          // display: block;
          transition: all 0.2s;
        }

        .tip {
          opacity: 0;
          pointer-events: none;
          // display: none;
          position: absolute;
          top: 5px;
          margin: auto;
          white-space: nowrap;
          transform: translateX(calc(-100% - 50px));
          font-size: 15px;
          transition: all 0.2s;

          img {
            $img-size: 50px;
            height: $img-size;
            width: $img-size;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 15px;
          }

          span {
            position: relative;
            top: -15px;
          }
        }
      }

      .remove {
        margin-bottom: 20px;
        box-shadow: 0 5px 10px rgba(245, 135, 137, 1);

        &:hover {
          box-shadow: 0 5px 10px rgba(245, 135, 137, 0);
        }

        &::after {
          background-color: rgba(245, 135, 137, 1);
        }
      }

      .edit {
        margin-bottom: 20px;
        box-shadow: 0 5px 10px rgba(153, 204, 255, 1);

        &:hover {
          box-shadow: 0 5px 10px rgba(153, 204, 255, 0);
        }

        &::after {
          background-color: rgba(153, 204, 255, 1);
        }
      }

      .save {
        margin-bottom: 20px;
        box-shadow: 0 5px 10px rgba(121, 250, 197, 1);

        &:hover {
          box-shadow: 0 5px 10px rgba(121, 250, 197, 0);
        }

        &::after {
          background-color: rgba(121, 250, 197, 1);
        }
      }

      .login-out {
        box-shadow: 0 5px 10px rgba(255, 21, 21, 0.8);

        &:hover {
          box-shadow: 0 5px 10px rgba(255, 21, 21, 0);
        }

        &::after {
          background-color: rgba(255, 21, 21, 0.8);
        }
      }

      .options-btn {
        opacity: 0;
        background-color: white;
        color: white;
        padding: 20px;
        border-radius: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;

        svg {
          z-index: 10;
        }

        &::after {
          $size: 90%;
          content: "";
          width: $size;
          height: $size;
          border-radius: 100%;
          position: absolute;
          z-index: 1;
        }

        .tip {
          position: absolute;
        }
      }
    }

    .file {
      width: 400px;
      max-width: 400px;
      min-width: 400px;
      flex: 2;
      height: 100vh;
      padding: 0 $border-30;
      position: relative;

      .background {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
      }

      .fis-border {
        height: calc(100% - 155px);
        padding: 15px;
        background: rgba(255, 255, 255, 0.5);
        color: black;
        margin-top: 25px;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

        .file-list {
          height: calc(100%);
          overflow: hidden;
          font-size: 13px;

          &:hover {
            overflow: auto;
          }

          &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
          }

          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
          }

          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 10px;
          }

          .dir {
            span::before {
              background-color: #00CAFF;
            }
          }

          > div {
            margin-bottom: 25px;

            > span {
              position: relative;
              padding-left: 20px;
              cursor: pointer;

              &::before {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: #B3F98B;
                top: calc(50% - 5px);
                left: 0;
                border-radius: 100%;
              }
            }
          }
        }
      }

      .logo {
        padding-top: 30px;

        img {
          height: 35px;
        }
      }

      .file-url {
        padding-top: $border-30;

        > span {
          @include box-line-center;
          background-color: rgba(0, 0, 0, 0.15);
          font-size: 15px;
          padding: 5px 10px;
          color: #979797;
          border-radius: 10px;

          svg {
            color: #ffff33;
            margin-right: 7px;
            font-size: 17px;
          }

          > div:nth-child(1) {
            display: flex;
            flex-direction: column;
            height: 15px;
            width: 20px;
            overflow: hidden;

            svg:nth-child(1),
            svg:nth-child(2) {
              transform: translateY(0%);
              transition: all 0.5s;
            }

            &:hover svg:nth-child(1),
            &:hover svg:nth-child(2) {
              transform: translateY(-100%);
              transition: all 0.5s;
            }
          }

          .url-item {
            height: 22px;
            overflow: hidden;

            > div {
              max-width: 358px;
              display: flex;
              overflow-x: scroll;
              scroll-behavior: smooth;
              scroll-snap-type: x mandatory;

              > span {
                scroll-snap-align: end;
                flex-shrink: 0;
                color: white;
                font-size: 13px;
                border-radius: 10px;
                padding: 2px 10px;
                margin-right: 5px;
                background-color: rgba(0, 0, 0, 0.07);
                cursor: pointer;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }

    .markdown {
      flex: 8;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);

      .editor {
        height: 100%;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15) !important;
      }
    }
  }

  .name-set {
    .title {
      > span {
        svg {
          color: #fab2cf !important;
          animation: unset !important;
        }
      }
    }
  }

  .file-set {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);

    .title {
      display: flex;
      flex-direction: column;

      > span {
        font-size: 25px;
        margin-bottom: 30px;

        svg {
          color: #63dfff;
          margin-right: 10px;
          animation: spin infinite linear 3s;
        }

        > span:nth-child(3) {
          animation: hide_show infinite 1s;
        }

        > span:nth-child(2),
        > span:nth-child(3) {
          filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
        }
      }

      > div {
        display: flex;
        animation: bottom-in-50 0.5s forwards;

        > input {
          outline: none;
          margin-right: 50px;
          background-color: rgba(96, 223, 255, 0.6);
          color: white;
          font-size: 20px;
          min-width: 400px;
          padding: 15px 30px;
          border-radius: 35px;
          border: 3.5px solid white;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        > div {
          background-color: white;
          padding: 15px 30px;
          border-radius: 35px;
          border: 3.5px solid white;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          transition: all 0.3s;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          &:hover {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
          }
        }
      }
    }

    .close-edit {
      position: absolute;
      right: 30px;
      top: 30px;
      color: #ee787d;
      font-size: 40px;
    }
  }

  .del-dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);

    > div {
      > span {
        font-size: 25px;

        svg {
          color: #ffca42;
          margin-right: 10px;
        }

        > span:nth-child(3) {
          animation: hide_show infinite 1s;
        }
      }

      > div {
        margin-top: 50px;
        display: flex;
        justify-content: center;

        .close {
          svg {
            position: relative;
            left: 2px;
          }

          box-shadow: 0 5px 10px rgba(153, 204, 255, 1);

          &:hover {
            box-shadow: 0 5px 10px rgba(153, 204, 255, 0);
          }

          &::before {
            background-color: rgba(153, 204, 255, 1);
          }
        }

        .ok {
          margin-left: 50px;
          box-shadow: 0 5px 10px rgba(245, 135, 137, 1);

          &:hover {
            box-shadow: 0 5px 10px rgba(245, 135, 137, 0);
          }

          &::before {
            background-color: rgba(245, 135, 137, 1);
          }
        }

        .ok,
        .close {
          $size: 90px;
          color: white;
          height: $size;
          width: $size;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          border-radius: 100%;
          background-color: white;
          position: relative;
          z-index: 1;
          transition: all 0.3s;

          &:hover {
            transition: all 0.3s;
          }

          &::before {
            content: "";
            position: absolute;
            $after-size: 5px;
            left: $after-size;
            right: $after-size;
            top: $after-size;
            bottom: $after-size;
            border-radius: 100%;
            z-index: -1;
          }
        }
      }
    }
  }
}
